<template>
	<view class="navTabBox">
		<!-- 标题数量小于5 -->
		<view class="shortTab" v-if="tabTitleSon.length<=5">
			<!-- 导航栏 -->
			<view class='navTab'>
				<view v-for="(item,index) in tabTitleSon" :key="index" class='navTabItem' :class="index===tabClickSon?'click':''"
				 @click='navClickSon(index)'>{{item}}</view>
				<!-- <view class="cu-tag badge">7</view> -->
			</view>
			<!-- 下划线 -->
			<!-- <view class="underlineBox" :style='"transform:translateX("+isLeftSon+"px);width:"+isWidthSon+"px"'>
				<view class="underline"></view>
			</view> -->
		</view>
		<!-- 标题数量大于5 开启长导航栏模式 -->
		<view class="longTab" v-if="tabTitleSon.length>5">
			<scroll-view scroll-x="true" class="scrollSon" style="white-space: nowrap; display: flex" scroll-with-animation
			 :scroll-into-view="toViewSon">
				<view class="longItem" :data-index="index" :class="index===tabClickSon?'click':''" v-for="(item,index) in tabTitleSon"
				 :key="index" :id="'id'+index" @click="longClickSon(index)">{{item}}</view>
				<!-- <view class="cu-tag badge">7</view> -->
				<!-- <view class="underlineBox" :style='"transform:translateX("+isLeftSon+"px);"'>
					<view class="underline"></view>
				</view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'navTabSon',
		props: {
			tabTitleSon: {
				type: Array,
				default: (res) => {
					return []
				}
			}
		},
		data() {
			return {
				tabClickSon: 0, //导航栏被点击
				isLeftSon: 0, //导航栏下划线位置
				isWidthSon: 0, //每个导航栏占位
				toViewSon: '',
				isLongWidthSon: 0,
				CustomBar: this.CustomBar,
			};
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidthSon = (94 / e.windowWidth * 100) / that.tabTitleSon.length //宽度除以导航标题个数=一个导航所占宽度
					that.isLongWidthSon = (94 / e.windowWidth * 100) / 5
				}
			})
			this.toViewSon = 'id0'
		},
		methods: {
			// 导航栏点击
			navClickSon(index) {
				// this.$parent.currentTab = index 
				this.$emit('changeTabSon', index); //设置swiper的第几页
				this.tabClickSon = index //设置导航点击了哪一个
				this.isLeftSon = index * this.isWidthSon //设置下划线位置
			},
			longClickSon(index) {
				var tempIndex = index - 2
				tempIndex = tempIndex <= 0 ? 0 : tempIndex
				this.toViewSon = `id${tempIndex}` //动画滚动,滚动至中心位置
				this.tabClickSon = index //设置导航点击了哪一个
				this.isLeftSon = index * this.isLongWidthSon //设置下划线位置
				this.$emit('changeTabSon', index); //设置swiper的第几页
				// this.$parent.currentTab = index //设置swiper的第几页
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navTabBox {
		width: 94vw;
		// background: #ffffff;
		position: fixed;
		left: 3vw;
		z-index: 9;
		color: rgb(127, 184, 178);
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .1);

		.click {
			color: #39b54a;
			background-color: #fe6634;
		}

		.longTab {
			width: 100%;

			.longItem {
				width: 20vw;
				height: 70rpx;
				display: inline-block;
				line-height: 70rpx;
				text-align: center;
			}

			.scrollSon {
				border: 1px solid #e54d42;
				border-radius: 5px;
				width: 100%;
				margin: auto;
			}

			.underlineBox {
				height: 3px;
				width: 20%;
				display: flex;
				align-content: center;
				justify-content: center;
				transition: .5s;

				.underline {
					width: 84rpx;
					height: 4px;
					background-color: #39b54a;
				}
			}
		}

		.shortTab {
			width: 100%;

			.navTab {
				display: flex;
				width: 100%;
				height: 70rpx;
				position: relative;
				border: 1px solid #e54d42;
				border-radius: 5px;
				margin: auto;

				.navTabItem {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 70rpx;
					display: inline-block;
					line-height: 70rpx;
					text-align: center;
				}
			}

			.underlineBox {
				height: 3px;
				display: flex;
				align-content: center;
				justify-content: center;
				transition: .5s;

				.underline {
					width: 84rpx;
					height: 3px;
					background-color: #39b54a;
				}
			}
		}
	}
</style>
